<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>电影网站 - 首页</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
<div th:replace="common/header :: header"></div>

<div class="container mt-4">
    <div class="row row-cols-1 row-cols-md-4 g-4">
        <div class="col" th:each="movie : ${movieList}">
            <div class="card h-100">
                <img th:src="${movie.coverUrl}" class="card-img-top" alt="电影封面">
                <div class="card-body">
                    <h5 class="card-title" th:text="${movie.name}"></h5>
                    <p class="card-text">
                        <span th:each="category : ${movie.categories}" class="badge bg-primary me-2" th:text="${category.name}"></span>
                        <span class="badge bg-success" th:text="'评分: ' + ${movie.score}"></span>
                    </p>
                    <p class="card-text" th:text="${#strings.substringBefore(movie.description, '。') + '。'}"></p>
                </div>
                <div class="card-footer">
                    <a th:href="@{'/movie/' + ${movie.id}}" class="btn btn-primary w-100">查看详情</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 分页 -->
    <nav class="mt-4">
        <ul class="pagination justify-content-center">
            <li class="page-item" th:classappend="${currentPage == 1 ? 'disabled' : ''}">
                <a class="page-link" th:href="@{'/index?pageNo=' + ${currentPage - 1}}">上一页</a>
            </li>
            <li class="page-item" th:each="i : ${#numbers.sequence(1, pageCount)}" th:classappend="${i == currentPage ? 'active' : ''}">
                <a class="page-link" th:href="@{'/index?pageNo=' + ${i}}" th:text="${i}"></a>
            </li>
            <li class="page-item" th:classappend="${currentPage == pageCount ? 'disabled' : ''}">
                <a class="page-link" th:href="@{'/index?pageNo=' + ${currentPage + 1}}">下一页</a>
            </li>
        </ul>
    </nav>
</div>

<script src="/js/bootstrap.bundle.min.js"></script>
</body>
</html>